<template>
  <div>
    <h2>产品库存</h2>
    <div class="chart" id="chart4">
    </div>
  </div>
</template>

<script>
import { getInventorySale } from '@/api/data'
import * as echarts from 'echarts'
import { onMounted, reactive } from 'vue'
export default {
  setup () {
    // 获取库存数据
    const getData = () => {
      return getInventorySale()
    }
    //图表数据
    let data = reactive({})

    onMounted(async () => {
      data = await getData()

      let myChart = echarts.init(document.getElementById('chart4'))
      myChart.setOption({
        tooltip: {

        },
        legend: {//设置图例
          top: 'bottom',//放到最下面,
          textStyle: {
            color: 'white'  // 设置图例标签文字颜色为白色
          },
        },
        series: [
          {
            // name: 'Nightingale Chart',
            type: 'pie',//饼图
            radius: [10, 120],//饼图的半径数组的第一项是内半径，第二项是外半径
            center: ['50%', '45%'],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
            roseType: 'area',//设置成玫瑰图
            itemStyle: {
              borderRadius: 10//用于指定饼图扇形区块的内外圆角半径，
            },
            data: data.data.data.chartData//数据
          }
        ]
      })

      // 让echarts根据浏览器大小改变动态该改变
      window.onresize = () => {//自适应大小
        myChart.resize()
      }
    })


    return {
      data, getData
    }
  }

}
</script>

<style lang="less" scoped>
h2 {
  height: .75rem;
  color: #fff;
  line-height: .75rem;
  text-align: center;
  font-size: 0.35rem;
}

.chart {
  height: 5.625rem;
}
</style>